<template>
  <div>
    <div id = "input">
      <div class="input">
        <el-input v-model="book.name" placeholder="Please input" />
      </div>
      <div class = "buttons">
        <el-button type="primary" @click="search()">搜索</el-button>
      </div>
      <div class = "buttons">
        <el-button type="success" @click="addBook()">新增</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="dataList" stripe style="width: 100%">
      <el-table-column prop="id" label="编号id" width="180" />
      <el-table-column prop="name" label="图书名称" width="180" />
      <el-table-column prop="category.name" label="图书类型" />
      <el-table-column label="图书封面">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 60px"
              :src="scope.row.url"
              fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="图书相关照片" >
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 60px"
              :src="scope.row.url"
              fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="图书库存" />
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click = "edit(scope.row.id
          , scope.row.name, scope.row.cid, scope.row.url, scope.row.url, scope.row.stock)">修改</el-button>
          <el-button type="text" size="small" @click = "deletedd(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible="addBookVisible" title="新增图书" :append-to-body="true">
      <el-form :model="book">
        <el-form-item label="图书名称">
          <el-input v-model="book.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图书库存">
          <el-input v-model="book.stock" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图书分类">
          <el-select v-model="book.cid" placeholder="Select">
            <el-option
                v-for="category in categoryList"
                :key="category.name"
                :label="category.name"
                :value="category.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图书照片">
          <template>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/books/upload"
                :show-file-list="true"
                :on-success="singleSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture"
                name = "imageFile"
                :limit="1"
            >
              <el-button size="small" type="primary">Click to upload</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  jpg/png files with a size less than 500kb
                </div>
              </template>
            </el-upload>
          </template>
        </el-form-item>
        <el-form-item label="图书相关照片">
          <template>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/books/upload"
                :show-file-list="true"
                :on-success="OtherSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture"
                name = "imageFile"
                :limit = "1"
            >
              <el-button size="small" type="primary">Click to upload</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  jpg/png files with a size less than 500kb
                </div>
              </template>
            </el-upload>
          </template>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addBookVisible = false">取消</el-button>
        <el-button type="primary" @click="add()">提交</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog :visible="editBookVisible" title="更新图书" :append-to-body="true">
      <el-form :model="book">
        <el-form-item label="图书名称">
          <el-input v-model="book.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图书库存">
          <el-input v-model="book.stock" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图书分类">
          <el-select v-model="book.cid" placeholder="Select">
            <el-option
                v-for="category in categoryList"
                :key="category.name"
                :label="category.name"
                :value="category.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图书照片">
          <template>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/books/upload"
                :show-file-list="true"
                :on-success="singleSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture"
                name = "imageFile"
                :limit="1"
            >
              <el-button size="small" type="primary">Click to upload</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  jpg/png files with a size less than 500kb
                </div>
              </template>
            </el-upload>
          </template>
        </el-form-item>
        <el-form-item label="图书相关照片">
          <template>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/books/upload"
                :show-file-list="true"
                :on-success="OtherSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture"
                name = "imageFile"
                :limit = "1"
            >
              <el-button size="small" type="primary">Click to upload</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  jpg/png files with a size less than 500kb
                </div>
              </template>
            </el-upload>
          </template>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="editBookVisible = false">取消</el-button>
        <el-button type="primary" @click="editss()">提交</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import axios from "axios";

export default {
  name: "book",
  data() {
    return {
      dataList: [],
      requestUrl: 'http://localhost:9000/books/list',
      addUrl: 'http://localhost:9000/books/add',
      updateUrl: 'http://localhost:9000/books/update',
      deleteUrl: 'http://localhost:9000/books/delete',
      searchUrl: 'http://localhost:9000/books/search',
      loading: false,
      book:{
        id: 0,
        name: '',
        url: '',
        cid: 0,
        stock: 0,
        urlList: ''
      },
      editBookVisible: false,
      addBookVisible: false,
      categoryList:[]
    }
  },
  mounted() {
    this.load();
  },
  methods:{
    search:function () {
      axios.post(this.searchUrl, this.book).then((res) => {
        if(res.data.code === 0){
          this.dataList = res.data.data
          this.$message.success("搜索成功")
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    deletedd:function (id) {
      this.book.id = id
      axios.post(this.deleteUrl, this.book).then((res) => {
        if(res.data.code === 0){
          this.load();
          this.$message.success("删除成功")
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    editss:function () {
      axios.post(this.updateUrl, this.book).then((res) => {
        if(res.data.code === 0){
          this.editBookVisible=false
          this.load()
          this.$message.success("更新成功")
        }else{
          this.editBookVisible=false;
          this.$message.error("更新失败"+res.data.msg)
        }
      })
    },
    edit:function (id, name, cid, url, RUrl, stock){
      this.book.id = id
      this.book.name = name
      this.book.cid = cid
      this.book.url = url
      this.book.stock = stock
      this.book.urlList = RUrl
      this.editBookVisible = true;
    },
    add:function () {
      axios.post(this.addUrl, this.book).then((res) => {
        console.log(this.book)
        if(res.data.code === 0){
          this.addBookVisible=false;
          this.load()
          this.$message.success("添加成功")
        }else{
          this.addBookVisible=false;
          this.load()
          this.$message.error("添加失败"+res.data.msg)
        }
      })
    },
    singleSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.book.url = res.url
    },
    OtherSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.book.urlList = res.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('只能上传jpg文件哦')
      }
      if (!isLt2M) {
        this.$message.error('上传文件的大小不能超过2m哦')
      }
      return isJPG && isLt2M
    },
    load:function () {
      // eslint-disable-next-line no-unused-vars
      axios.get(this.requestUrl).then((res) => {
        if(res.data.code == 0){
          console.log(res);
          this.dataList = res.data.data;
          this.loading = false;
        }else{
          this.dataList = [];
          this.loading = true;
        }
      })
      axios.get('http://localhost:9000/category/list').then((res) => {
        if(res.data.code == 0){
          console.log(res);
          this.categoryList = res.data.data;
        }else{
          this.categoryList = [];
        }
      })
    },
    addBook:function () {
      this.addBookVisible = true;
    }
  }
}
</script>

<style scoped>
.input{
  width: 150px;
  margin-right: 20px;
  float: left;
}
.buttons{
  float: left;
  margin-right: 15px;
}
</style>
